<template>
  <div id="controlBar">
    <input
      class="left input"
      v-model="color_basic_tag"
      type="text"
      placeholder="添加色类名称"
      @keyup.enter='addColorBasic'
    />
    <button class="left mt-20" @click="addColorBasic">添加色类</button>
    <button class="left m-20" @click="removeColorBasic">删除色类</button>
    <input
      class="left input"
      v-model="color_medium_tag"
      type="text"
      placeholder="添加色组名称"
      @keyup.enter='addColorMedium'
    />
    <button class="left mt-20" @click="addColorMedium">添加色组</button>
    <button class="left m-20" @click="removeColorMedium">删除色组</button>
    <input
      class="left input"
      v-model="change_tag"
      type="text"
      placeholder="更改色类名称"
      @keyup.enter="changeColorBasicTag"
    />
    <button class="left mt-20" @click="changeColorBasicTag">色类更名</button>
    <button class="right m-20" @click="info">说明</button>
    <button class="right m-20" @click="save">保存</button>
    <button class="right m-20" @click="restore">恢复</button>
    <button class="right m-20" @click="revoke">撤销</button>

    <input class="checkbox" id="autoSave" type="checkbox" v-model="autoSave" />
    <label for="autoSave">自动保存</label>
  </div>
</template>

<script>
import { mapState,mapGetters,mapActions } from 'vuex'

export default {
  name: "controlBar",
  data() {
    return {
      color_basic_tag: undefined,
      color_medium_tag:undefined,
      change_tag:undefined,
    };
  },
  computed:{
    
    ...mapState([
      'current_tag_idx',
    ]),
    ...mapGetters([
      'current_color_idx',
      'color_medium',
      'color_basic',
      'basic_tags',
      'color_tags',
      'current_color',
    ]),
    autoSave:{
      get(){
        return this.$store.state.autoSave
      },
      set(val){
        this.$store.commit('set_autoSave',val)
      }
    }
  },
  mounted() {
    this.$nextTick(
    // setTimeout(()=>{
    //     alert('一人之力，错失难料——请阅读说明并在复杂操作后刷新页面验证，以免丢失数据')
    // },1000)
    )
  },
  methods:{
    ...mapActions([
      'opColorBasic',
      'opColorMedium',
      'opColorBasicTag',
      'save',
      'revoke',
      'restore'
    ]),
    info(){
      alert(
        '1.网页上方为控制区；中间为颜色类别选择区；下方为颜色展示区\n'+
        '2.控制区可完成添加、删除色类与色组；对色类更名；可完成对操作的撤销和恢复；可选择是否（手动）保存操作\n'+
        '3.禁止删除【待定色类】与【待定色组】\n'+
        '4.点击色块、拖动鼠标生成透明框将选中色块;被选中色块有黑色边框,每次可将选中的色块拖拽至被激活的色类块中，完成色块的色类标注\n'+
        '5.选中的色类块有黑色边框，下方展示与其对应的色块；激活的色类块背景颜色发生变化；选中的色组块有红色边框\n'+
        '6.拖动色类块至其它色组中可将其标注为相应色组\n'
        )
    },
    isTagAvaliable(color_name){
      if (color_name == undefined || color_name == '') {
        // color_name = 'W'
        alert("请先添加色类名称！")
        return false
      }
      if(this.color_medium(color_name)){
        alert('已存在与其重名的颜色组！')
        return  false
      }
      if(this.color_basic(color_name)){
        alert('已存在颜色类！')
        return false
      }
      return true
    },
    changeColorBasicTag(){
      let color_name = this.change_tag
      if(!this.isTagAvaliable(color_name)){
        return
      }
      
      this.opColorBasicTag({
        current:this.current_color[1][0], 
        target:color_name,
        opType:'tag'
      })
    },
    addColorBasic() {
      let color_name = this.color_basic_tag
      if(!this.isTagAvaliable(color_name)){
        return
      }
      
      let color_tag = [color_name, "(255,255,255)",[]];
      this.opColorBasic({
        current:-1, 
        target:[this.current_color[0],color_tag],
        opType:'basic'
      })
      
    },
    addColorMedium() {
      let color_name = this.color_medium_tag
      if(!this.isTagAvaliable(color_name)){
        return
      }
      let color_tag = [color_name, "(255,255,255)",];
      this.opColorMedium({
        current:-1, 
        target:[...color_tag,[[...color_tag,[]]]],
        opType:'medium'
        });
    },
    removeColorBasic() {
      let color_tag = this.current_color[1];
      if(!this.isColorDeletable(color_tag,'basic')){
        return 
      }
      this.opColorBasic({
        current:this.current_color, 
        target:-1,
        opType:'basic'});
    },
    removeColorMedium() {
      alert('正在删除【色组】！')
      let color_tag = this.current_color[0];
      if(!this.isColorDeletable(color_tag,'medium')){
        return
      }
      this.opColorMedium({
        current:this.current_color[0], 
        target:-1,
        opType:'medium'
        });
    },
    isColorDeletable(color_tag,color_level){
      if(color_level=='basic'){
        if(color_tag[0]=='待定'){
          alert('禁止删除【色类】待定区！')
          return false
        }
        if(this.basic_tags[this.current_tag_idx[0]].length == 1){
          alert('这是本组的最后一个【色类】，若要删除,请直接删除色组！')
          return false
        }
        if(this.color_tags[this.current_color_idx].length > 0){
          alert('无法删除含有色块的色类！')
          return false
        }
      }
      else if(color_level=='medium'){
        if(color_tag[0]=='待定'){
          alert('禁止删除【色组】待定区！')
          return false
        }
        for(let i=0;i<this.basic_tags[this.current_tag_idx[0]].length;i++){
          if(this.current_color[0][2][i][2].length > 0){
            alert('无法删除含有色块的色组！')
            return false
          }
        }
      }
      return true
    },
    

  }
};
</script>

<style scoped>
#controlBar {
  margin: 10px 0;
  height: 50px;
}
button {

  height: 30px;
  font-size: 14px;
}
.right {
  float: right;
}
.left {
  float: left;
}
.m-20 {
  margin: 10px;
}

.mt-20 {
  margin-top: 10px;
}

.input {
  margin: 10px 0;
  width: 100px;
  height: 23px;
  font-size: 14px;
}
label {
  float: right;
  margin-top: 10px;
  width: 120px;
  height: 30px;
  font-size: 18px;
  text-align: right;
  line-height: 30px;
}

.checkbox {
  float: right;
  margin-top: 10px;
  width: 30px;
  height: 30px;
  font-size: 14px;
}
</style>